<template>
	<div class="container">
		<div v-if="hasPermission('90870090')" class="btn-top-fixed">
			<el-button
				type="success"
				icon="el-icon-sort"
				size="small"
				@click="showColumnSet"
			>
				{{ $t('common.row_set') }}
			</el-button>
		</div>
		<el-table
			ref="refSettleTable"
			:max-height="tableHeight"
			v-loading="loading"
			element-loading-spinner="el-icon-loading"
			size="mini"
			class="small-size-table"
			border
			:data="dataList"
			style="width: 100%"
			:header-cell-style="getRowClass"
			highlight-current-row
			header-align="center"
			@sort-change="handleDetailTableSort"
		>
			<el-table-column
				label="序号"
				type="index"
				width="60"
				align="center"
			></el-table-column>
			<el-table-column
				label="会员账号"
				min-width="100"
				align="center"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{ scope.row.userName || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				label="会员昵称"
				min-width="120"
				align="center"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{ scope.row.nickName || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				v-if="tableColumnData[tableColumns.handBeginDate]"
				label="开始时间"
				min-width="160"
				align="center"
				prop="handBeginDate"
				sortable="custom"
			>
				<template slot-scope="scope">
					{{ parseTime(scope.row.handBeginDate) || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				v-if="tableColumnData[tableColumns.handEndDate]"
				label="结束时间"
				min-width="160"
				align="center"
				prop="handEndDate"
				sortable="custom"
			>
				<template slot-scope="scope">
					{{ parseTime(scope.row.handEndDate) || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				v-if="tableColumnData[tableColumns.tableCode]"
				label="牌桌ID"
				min-width="195"
				align="center"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					{{ scope.row.tableCode || '-' }}
				</template>
			</el-table-column>
			<el-table-column
				v-if="tableColumnData[tableColumns.handCount]"
				label="手数"
				min-width="80"
				align="center"
				prop="handCount"
				sortable="custom"
			>
				<template slot-scope="scope">
					{{ scope.row.handCount + '' ? scope.row.handCount : '-' }}
				</template>
			</el-table-column>
			<el-table-column
				v-if="tableColumnData[tableColumns.costTotal]"
				:key="columnSetKey"
				min-width="135"
				align="center"
				show-overflow-tooltip
				prop="costTotal"
				sortable="custom"
			>
				<template #header>
					<span>会员总输赢</span>
					<el-popover
						placement="top-start"
						width="auto"
						trigger="hover"
					>
						<!-- 总输赢 = 牌桌带出+牌桌划出-牌桌带入-鱿鱼钱包支付-局服务费-增值相关子类的订单金额 -->
						<div>
							抽水后打牌输赢 + 经典保险输赢 + ev保险输赢 +
							鱿鱼输赢 -
						</div>
						<div>
							局服务费 -
							（增值相关子类的订单金额）+（返利相关子类的订单金额）
						</div>
						<span slot="reference">
							<i class="el-icon-question"></i>
						</span>
					</el-popover>
				</template>
				<template slot-scope="scope">
					<span :style="handleNumberColor(scope.row.costTotal)">
						{{
							handleNumber(
								scope.row.memberCurrency,
								scope.row.costTotal
							)
						}}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				v-if="tableColumnData[tableColumns.bringOutChipScore]"
				label="牌桌带出"
				min-width="100"
				align="center"
				show-overflow-tooltip
				prop="bringOutChipScore"
				sortable="custom"
			>
				<template slot-scope="scope">
					<span>
						{{
							handleNumber(
								scope.row.memberCurrency,
								scope.row.bringOutChipScore
							)
						}}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				v-if="tableColumnData[tableColumns.tableTransToSquidAmount]"
				label="牌桌划出"
				min-width="100"
				align="center"
				show-overflow-tooltip
				prop="tableTransToSquidAmount"
				sortable="custom"
			>
				<template slot-scope="scope">
					<span>
						{{
							handleNumber(
								scope.row.memberCurrency,
								scope.row.tableTransToSquidAmount
							)
						}}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				v-if="tableColumnData[tableColumns.bringMidwayChip]"
				label="牌桌带入"
				min-width="100"
				align="center"
				show-overflow-tooltip
				prop="bringMidwayChip"
				sortable="custom"
			>
				<template slot-scope="scope">
					<span>
						{{
							handleNumber(
								scope.row.memberCurrency,
								scope.row.bringMidwayChip
							)
						}}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				v-if="tableColumnData[tableColumns.bringCount]"
				label="带入次数"
				min-width="100"
				align="center"
				prop="bringCount"
				sortable="custom"
			>
				<template slot-scope="scope">
					{{ scope.row.bringCount }}
				</template>
			</el-table-column>
			<el-table-column
				v-if="tableColumnData[tableColumns.grossProfit]"
				label="未抽水打牌输赢"
				min-width="140"
				align="center"
				show-overflow-tooltip
				prop="grossProfit"
				sortable="custom"
			>
				<template slot-scope="scope">
					<span>
						{{
							handleNumber(
								scope.row.memberCurrency,
								scope.row.grossProfit
							)
						}}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				v-if="tableColumnData[tableColumns.netAmount]"
				label="抽水后打牌输赢"
				min-width="140"
				align="center"
				show-overflow-tooltip
				prop="netAmount"
				sortable="custom"
			>
				<template slot-scope="scope">
					<span>
						{{
							handleNumber(
								scope.row.memberCurrency,
								scope.row.netAmount
							)
						}}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				v-if="tableColumnData[tableColumns.userHandFee]"
				label="手牌服务费"
				min-width="120"
				align="center"
				show-overflow-tooltip
				prop="userHandFee"
				sortable="custom"
			>
				<template slot-scope="scope">
					<span>
						{{
							handleNumber(
								scope.row.memberCurrency,
								scope.row.userHandFee
							)
						}}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				v-if="tableColumnData[tableColumns.tableFee]"
				label="局服务费"
				min-width="120"
				align="center"
				show-overflow-tooltip
				prop="tableFee"
				sortable="custom"
			>
				<template slot-scope="scope">
					<span>
						{{
							handleNumber(
								scope.row.memberCurrency,
								scope.row.tableFee
							)
						}}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				v-if="tableColumnData[tableColumns.insuredNetAmount]"
				label="经典保险输赢"
				min-width="120"
				align="center"
				show-overflow-tooltip
				prop="insuredNetAmount"
				sortable="custom"
			>
				<template slot-scope="scope">
					<span
						:style="handleNumberColor(scope.row.insuredNetAmount)"
					>
						{{
							handleNumber(
								scope.row.memberCurrency,
								scope.row.insuredNetAmount
							)
						}}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				v-if="tableColumnData[tableColumns.evInsuredNetAmount]"
				label="EV保险输赢"
				min-width="120"
				align="center"
				show-overflow-tooltip
				prop="evInsuredNetAmount"
				sortable="custom"
			>
				<template slot-scope="scope">
					<span
						:style="handleNumberColor(scope.row.evInsuredNetAmount)"
					>
						{{
							handleNumber(
								scope.row.memberCurrency,
								scope.row.evInsuredNetAmount
							)
						}}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				v-if="tableColumnData[tableColumns.sendBarrageAmount]"
				label="发弹幕"
				min-width="150"
				align="center"
				show-overflow-tooltip
				prop="sendBarrageAmount"
				sortable="custom"
			>
				<template slot-scope="scope">
					<span>
						{{
							handleNumber(
								scope.row.currency,
								scope.row.sendBarrageAmount
							)
						}}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				v-if="tableColumnData[tableColumns.sendEmoteAmount]"
				label="发表情"
				min-width="150"
				align="center"
				show-overflow-tooltip
				prop="sendEmoteAmount"
				sortable="custom"
			>
				<template slot-scope="scope">
					<span>
						{{
							handleNumber(
								scope.row.currency,
								scope.row.sendEmoteAmount
							)
						}}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				v-if="tableColumnData[tableColumns.sendPuraseAmount]"
				label="发短语"
				min-width="150"
				align="center"
				show-overflow-tooltip
				prop="sendPuraseAmount"
				sortable="custom"
			>
				<template slot-scope="scope">
					<span>
						{{
							handleNumber(
								scope.row.currency,
								scope.row.sendPuraseAmount
							)
						}}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				v-if="tableColumnData[tableColumns.sendVoiceAmount]"
				label="发语音"
				min-width="150"
				align="center"
				show-overflow-tooltip
				prop="sendVoiceAmount"
				sortable="custom"
			>
				<template slot-scope="scope">
					<span>
						{{
							handleNumber(
								scope.row.currency,
								scope.row.sendVoiceAmount
							)
						}}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				v-if="tableColumnData[tableColumns.interactPropAmount]"
				label="互动道具"
				min-width="150"
				align="center"
				show-overflow-tooltip
				prop="interactPropAmount"
				sortable="custom"
			>
				<template slot-scope="scope">
					<span>
						{{
							handleNumber(
								scope.row.currency,
								scope.row.interactPropAmount
							)
						}}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				v-if="tableColumnData[tableColumns.lookPublicCardAmount]"
				label="看公牌"
				min-width="150"
				align="center"
				show-overflow-tooltip
				prop="lookPublicCardAmount"
				sortable="custom"
			>
				<template slot-scope="scope">
					<span>
						{{
							handleNumber(
								scope.row.currency,
								scope.row.lookPublicCardAmount
							)
						}}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				v-if="tableColumnData[tableColumns.betActionDelayAmount]"
				label="下注行动延时"
				min-width="150"
				align="center"
				show-overflow-tooltip
				prop="betActionDelayAmount"
				sortable="custom"
			>
				<template slot-scope="scope">
					<span>
						{{
							handleNumber(
								scope.row.currency,
								scope.row.betActionDelayAmount
							)
						}}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				v-if="tableColumnData[tableColumns.insureActionDelayAmount]"
				label="保险行动延时"
				min-width="150"
				align="center"
				show-overflow-tooltip
				prop="insureActionDelayAmount"
				sortable="custom"
			>
				<template slot-scope="scope">
					<span>
						{{
							handleNumber(
								scope.row.currency,
								scope.row.insureActionDelayAmount
							)
						}}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				v-if="tableColumnData[tableColumns.lookHandAmount]"
				label="看手牌"
				min-width="150"
				align="center"
				show-overflow-tooltip
				prop="lookHandAmount"
				sortable="custom"
			>
				<template slot-scope="scope">
					<span>
						{{
							handleNumber(
								scope.row.currency,
								scope.row.lookHandAmount
							)
						}}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				v-if="tableColumnData[tableColumns.giveRewardAmount]"
				label="打赏"
				min-width="150"
				align="center"
				show-overflow-tooltip
				prop="giveRewardAmount"
				sortable="custom"
			>
				<template slot-scope="scope">
					<span>
						{{
							handleNumber(
								scope.row.currency,
								scope.row.giveRewardAmount
							)
						}}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				v-if="
					tableColumnData[tableColumns.interactivePropsRebateAmount]
				"
				label="互动道具返利"
				min-width="150"
				align="center"
				show-overflow-tooltip
				prop="interactivePropsRebateAmount"
				sortable="custom"
			>
				<template slot-scope="scope">
					<span>
						{{
							handleNumber(
								scope.row.currency,
								scope.row.interactivePropsRebateAmount
							)
						}}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				v-if="tableColumnData[tableColumns.lookHandRebateAmount]"
				label="看手牌返利"
				min-width="150"
				align="center"
				show-overflow-tooltip
				prop="lookHandRebateAmount"
				sortable="custom"
			>
				<template slot-scope="scope">
					<span>
						{{
							handleNumber(
								scope.row.currency,
								scope.row.lookHandRebateAmount
							)
						}}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				v-if="tableColumnData[tableColumns.giveRewardAcquireAmount]"
				label="打赏获得"
				min-width="150"
				align="center"
				show-overflow-tooltip
				prop="giveRewardAcquireAmount"
				sortable="custom"
			>
				<template slot-scope="scope">
					<span>
						{{
							handleNumber(
								scope.row.currency,
								scope.row.giveRewardAcquireAmount
							)
						}}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				v-if="
					tableColumnData[tableColumns.interactivePropsProfitAmount]
				"
				label="互动道具盈利"
				min-width="150"
				align="center"
				show-overflow-tooltip
				prop="interactivePropsProfitAmount"
				sortable="custom"
			>
				<template slot-scope="scope">
					<span>
						{{
							handleNumber(
								scope.row.currency,
								scope.row.interactivePropsProfitAmount
							)
						}}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				v-if="tableColumnData[tableColumns.lookHandProfitAmount]"
				label="看手牌盈利"
				min-width="150"
				align="center"
				show-overflow-tooltip
				prop="lookHandProfitAmount"
				sortable="custom"
			>
				<template slot-scope="scope">
					<span>
						{{
							handleNumber(
								scope.row.currency,
								scope.row.lookHandProfitAmount
							)
						}}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				v-if="tableColumnData[tableColumns.giveRewardProfitAmount]"
				label="打赏盈利"
				min-width="150"
				align="center"
				show-overflow-tooltip
				prop="giveRewardProfitAmount"
				sortable="custom"
			>
				<template slot-scope="scope">
					<span>
						{{
							handleNumber(
								scope.row.currency,
								scope.row.giveRewardProfitAmount
							)
						}}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				v-if="tableColumnData[tableColumns.pumpContribution]"
				label="手牌服务费贡献"
				min-width="150"
				align="center"
				show-overflow-tooltip
				prop="pumpContribution"
				sortable="custom"
			>
				<template slot-scope="scope">
					{{
						handleNumber(
							scope.row.memberCurrency,
							scope.row.pumpContribution
						)
					}}
				</template>
			</el-table-column>
			<el-table-column
				v-if="tableColumnData[tableColumns.tableFeeContribution]"
				label="局服务费贡献"
				min-width="150"
				align="center"
				show-overflow-tooltip
				prop="tableFeeContribution"
				sortable="custom"
			>
				<template slot-scope="scope">
					{{
						handleNumber(
							scope.row.memberCurrency,
							scope.row.tableFeeContribution
						)
					}}
				</template>
			</el-table-column>
			<el-table-column
				v-if="tableColumnData[tableColumns.contribution]"
				label="服务费贡献"
				min-width="150"
				align="center"
				show-overflow-tooltip
				prop="contribution"
				sortable="custom"
			>
				<template slot-scope="scope">
					{{
						handleNumber(
							scope.row.memberCurrency,
							scope.row.contribution
						)
					}}
				</template>
			</el-table-column>
			<el-table-column
				v-if="tableColumnData[tableColumns.squidBringOutAmount]"
				label="带出鱿鱼钱包"
				min-width="140"
				align="center"
				show-overflow-tooltip
				prop="squidBringOutAmount"
				sortable="custom"
			>
				<template slot-scope="scope">
					<span>
						{{
							handleNumber(
								scope.row.memberCurrency,
								scope.row.squidBringOutAmount
							)
						}}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				v-if="tableColumnData[tableColumns.squidBringInAmount]"
				label="带入鱿鱼钱包"
				min-width="140"
				align="center"
				show-overflow-tooltip
				prop="squidBringInAmount"
				sortable="custom"
			>
				<template slot-scope="scope">
					<span>
						{{
							handleNumber(
								scope.row.memberCurrency,
								scope.row.squidBringInAmount
							)
						}}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				v-if="tableColumnData[tableColumns.squidPayAmount]"
				label="鱿鱼钱包支付"
				min-width="140"
				align="center"
				show-overflow-tooltip
				prop="squidPayAmount"
				sortable="custom"
			>
				<template slot-scope="scope">
					<span>
						{{
							handleNumber(
								scope.row.memberCurrency,
								scope.row.squidPayAmount
							)
						}}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				v-if="tableColumnData[tableColumns.squidTransInAmount]"
				label="牌桌划入"
				min-width="120"
				align="center"
				show-overflow-tooltip
				prop="squidTransInAmount"
				sortable="custom"
			>
				<template slot-scope="scope">
					<span>
						{{
							handleNumber(
								scope.row.memberCurrency,
								scope.row.squidTransInAmount
							)
						}}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				v-if="tableColumnData[tableColumns.squidRound]"
				label="鱿鱼轮数"
				min-width="100"
				align="center"
				show-overflow-tooltip
				prop="squidRound"
				sortable="custom"
			>
				<template slot-scope="scope">
					<span>
						{{ scope.row.squidRound }}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				v-if="tableColumnData[tableColumns.squidRewardsAmount]"
				label="鱿鱼模式总奖励"
				min-width="140"
				align="center"
				show-overflow-tooltip
				prop="squidRewardsAmount"
				sortable="custom"
			>
				<template slot-scope="scope">
					<span>
						{{
							handleNumber(
								scope.row.memberCurrency,
								scope.row.squidRewardsAmount
							)
						}}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				v-if="tableColumnData[tableColumns.squidPayoutAmount]"
				label="鱿鱼模式总赔付"
				min-width="140"
				align="center"
				show-overflow-tooltip
				prop="squidPayoutAmount"
				sortable="custom"
			>
				<template slot-scope="scope">
					<span>
						{{
							handleNumber(
								scope.row.memberCurrency,
								scope.row.squidPayoutAmount
							)
						}}
					</span>
				</template>
			</el-table-column>
			<el-table-column
				v-if="tableColumnData[tableColumns.squidNetAmount]"
				label="鱿鱼输赢"
				min-width="120"
				align="center"
				show-overflow-tooltip
				prop="squidNetAmount"
				sortable="custom"
			>
				<template slot-scope="scope">
					<span :style="handleNumberColor(scope.row.squidNetAmount)">
						{{
							handleNumber(
								scope.row.memberCurrency,
								scope.row.squidNetAmount
							)
						}}
					</span>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			v-show="!!total"
			class="pageValue"
			:current-page.sync="pageNum"
			background
			layout="total, sizes,prev, pager, next, jumper"
			:page-size="pageSize"
			:page-sizes="$store.getters.pageSizes"
			:total="total"
			:pager-count="9"
			@current-change="handleCurrentChange"
			@size-change="handleSizeChange"
		></el-pagination>
		<TableColumnSet
			v-if="colSettings.visible"
			:visible.sync="colSettings.visible"
			:dialogColumnData="dialogColumnData"
			:activityListField="activityListField"
			@submitColumnSet="submitColumnSet"
			@choiceColumnSet="choiceColumnSet"
		></TableColumnSet>
	</div>
</template>

<script>
import list from '@/mixins/list'
import { tableColumns } from './components/tableColumn'
import TableColumnSet from '@/components/Dxn/TableColumnSet'
import dxnMixin from '@/mixins/dxnMixin'
export default {
	components: {
		TableColumnSet
	},
	mixins: [list, dxnMixin],
	props: {
		tableHeight: { type: [String, Number], default: 480 },
		queryData: {
			type: Object,
			default: () => {}
		},
		disabledSearch: {
			type: Boolean,
			default: false
		},
		activeIdx: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			dataList: [],
			total: 0,
			sortParams: {},
			tableColumns
		}
	},
	created() {
		this.initIndexDB('settleTable', this.activityListField)
	},
	methods: {
		clearDetailTableSort() {
			this.sortParams = {}
			this.$refs?.refSettleTable?.clearSort()
		},
		// 列表排序
		handleDetailTableSort({ prop, order }) {
			this.sortParams = {}
			this.sortParams.orderByField = prop
			// 升序
			if (order === 'ascending') {
				this.sortParams.orderByMode = 'asc'
			} else if (order === 'descending') {
				// 降序
				this.sortParams.orderByMode = 'desc'
			} else {
				this.sortParams.orderByField = undefined
				this.sortParams.orderByMode = undefined
			}
			this.loadData()
		},
		loadData() {
			this.dataList = []
			if (this.queryData.id && Number(this.activeIdx) === 1) {
				const params = {
					tableCode: this.queryData.id,
					...this.sortParams,
					...this.getParams(params)
				}
				this.loading = true
				this.$emit('changeDisabledSearch', true)
				this.$api
					.getGameOrderUserSettlementDetailBend(params)
					.then((res) => {
						if (res?.code === 200) {
							const { record, totalRecord } = res.data || {}
							this.dataList = Array.isArray(record)
								? Object.freeze(record)
								: []
							this.total = totalRecord || 0
						}
					})
					.catch(() => {})
					.finally(() => {
						this.loading = false
						this.$emit('changeDisabledSearch', false)
					})
			}
		}
		// // 跳转
		// handleJump(obj) {
		// 	this.$router.push(obj)
		// }
	}
}
</script>

<style lang="scss" scoped>
.container {
	.decoration {
		text-decoration: underline;
		cursor: pointer;
	}
}
.header-top-line {
	margin-top: -8px;
}
.btn-top-fixed {
	position: fixed;
	top: 250px;
	right: 45px;
	z-index: 10;
}
::v-deep .el-icon-question:after {
	font-size: 14px;
	margin-left: -2px;
}
</style>
